<template>
	<view class="content">
		<view class="content_image">
			<image :src="url" mode="aspectFill" @click="changImg"></image>
		</view>
		<!-- 内容 -->
		<view class="content_botton">
			<view class="content_info">
				<image :src="userinfo.avatar"></image>
				<view class="username">{{ userinfo.nickname }}</view>
				<view class="select">
					<view @click="myCollect">
						收藏商家({{(userinfo.collectList == '[]' || userinfo.collectList == null)? 0 : userinfo.collectList}})
					</view>
					<view @click="myThumb">喜欢商家
						({{ (userinfo.thumbList == '[]' || userinfo.thumbList == null)? 0 : userinfo.thumbList }})
					</view>
				</view>
			</view>
			<view class="other">
				<view class="other_message" @click="myPost">
					<view>我的帖子</view>
					<view>({{postNum}})条帖子</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="other_message" @click="myMessage">
					<view>我的消息</view>
					<view>({{messageNum}})条消息</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="other_message" @click="myCheckMessage">
					<view>系统消息</view>
					<view>({{checkMessageNum}})条消息</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="other_message" @click="changePassword">
					<view>修改密码</view>
					<view>点击修改密码</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="other_addres">
					<view>我的地址</view>
					<view>{{address}}</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="other_addres" @click="gotoChat">
					<view>跟我合作</view>
					<view>点击私聊客服</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="other_our" @click="callPhone">
					<view>联系我们</view>
					<view>{{ourPhone}}</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="my_order">
				<view class="my_order_item" v-for="item in list">
					<view class="my_order_content" @click="clickOperation(item)">
						<image :src="item.picture" mode="widthFix"></image>
						<view class="">{{ item.title }}</view>
					</view>
				</view>
			</view>
			<view v-if="userRole == 'admin'">
				<view class="my_order">
					<view class="my_order_item">
						<view class="my_order_content1" @click="gotoShopManagment">
							<image
								src="https://img1.baidu.com/it/u=3967147646,3687578425&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
								mode="widthFix">
							</image>
							<view class="">店铺管理</view>
						</view>
						<view style="padding-left: 160rpx;" class="my_order_content" @click="gotoUserManagment">
							<image
								src="https://img0.baidu.com/it/u=873676144,1876803054&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
								mode="widthFix"></image>
							<view class="">用户管理</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				postNum:0,
				userRole: '',
				messageNum: 0,
				checkMessageNum: 0,
				address: "",
				paramSuccess: {
					type: 'success',
					message: '退出成功',
					duration: '1000',
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
				},
				list: [],
				url: '',
				userinfo: [],
				collectList: "0",
				thumbList: "0",
				ourPhone:'10086',
			};
		},
		onShow() {
			let that = this;
			this.url = uni.getStorageSync('url');
			let collect = uni.getStorageSync('collect');
			that.loadMessageList()
			this.collectNum = collect.length;
			this.$ajax(this.$url.getLoginUser, 'GET', null, function(resp) {
				that.userinfo = resp.data.result
				that.userRole = that.userinfo.userRole;
				that.collectList = that.userinfo.collectList == null ? '0' : that.userinfo.collectList;
				that.thumbList = that.userinfo.thumbList == null ? '0' : that.userinfo.thumbList;
				that.address = that.userinfo.address == null ? '无' : that.userinfo.address;
				uni.setStorageSync("avatar", that.userinfo.avatar);
				console.log("userinfo", that.userinfo)
			})
			this.$ajax(that.$url.getAllOperation, "GET", null, function(resp) {
				that.list = resp.data.result;
			})
			this.$ajax(that.$url.searchMyPostNum, "GET", null, function(resp) {
				that.postNum = resp.data.result;
			})
			this.$ajax(this.$url.searchAllMyCheckMessage, "GET", null, function(resp){
				that.checkMessageNum = resp.data.result
			})
		},
		onPullDownRefresh() {
			let that = this;
			this.url = uni.getStorageSync('url');
			let collect = uni.getStorageSync('collect');
			that.loadMessageList()
			this.collectNum = collect.length;
			this.$ajax(this.$url.getLoginUser, 'GET', null, function(resp) {
				that.userinfo = resp.data.result
				that.userRole = that.userinfo.userRole;
				that.collectList = that.userinfo.collectList == null ? '0' : that.userinfo.collectList;
				that.thumbList = that.userinfo.thumbList == null ? '0' : that.userinfo.thumbList;
				that.address = that.userinfo.address == null ? '无' : that.userinfo.address;
				uni.setStorageSync("avatar", that.userinfo.avatar);
				console.log("userinfo", that.userinfo)
			})
			this.$ajax(that.$url.getAllOperation, "GET", null, function(resp) {
				that.list = resp.data.result;
			})
			setTimeout(()=>{
				uni.stopPullDownRefresh();
			}, 1200)
		},
		onLoad() {
			let that = this;
		},
		methods: {
			callPhone(){
				uni.makePhoneCall({
					phoneNumber: this.ourPhone,
					success: function() {
						console.log('拨打电话成功');
					},
					fail: function() {
						console.log('拨打电话失败');
					}
				});
			},
			gotoChat(){
				uni.navigateTo({
					url:'/pages/private_chat/private_chat?nickname=客服&receiverId=358070080350851072&flag=1'
				})
			},
			myCheckMessage(){
				uni.navigateTo({
					url:'/pages/my_check_message/my_check_message' 
				})
			},
			myPost(){
				uni.navigateTo({
					url:'/pages/my_post/my_post'
				})
			},
			gotoShopManagment() {
				uni.navigateTo({
					url: '/pages/shop_managment/shop_managment'
				})
			},
			gotoUserManagment() {
				uni.navigateTo({
					url: '/pages/user_managment/user_managment'
				})
			},
			loadMessageList: function() {
				let that = this;
				let data = {
					start: 1,
					length: 100
				}
				that.$ajax(that.$url.searchMyMessage, "POST", data, function(resp) {
					let result = resp.data.result
					that.messageNum = result.length;
				})
			},
			myMessage() {
				uni.navigateTo({
					url: '/pages/my_message/my_message'
				})
			},
			clickOperation(item) {
				let that = this;
				if (item.title == '退出登录') {
					that.logout();
				}
				if (item.title == '设置') {
					that.setup();
				}
				if (item.title == '修改密码') {
					that.changePassword();
				}
				if (item.title == '百宝箱') {
					that.treasureBox();
				}
				if (item.title == '课程表') {
					that.timetable();
				}
			},
			timetable(){
				let that = this;
				uni.navigateTo({
					url:'/pages/timetable/timetable'
				})
			},
			treasureBox(){
				let that = this;
				uni.navigateTo({
					url:'/pages/treasure_box/treasure_box'
				})
			},
			changePassword() {
				uni.navigateTo({
					url: '/pages/change_password/change_password'
				})
			},
			setup() {
				uni.navigateTo({
					url: '/pages/setup/setup'
				})
			},
			openAddressPicker() {
				console.log("进入地址选择器")
				let that = this;
				uni.chooseLocation({
					success: function(res) {
						that.address = res.name;
						uni.setStorageSync("address", res.name)
					}
				});
			},
			showToast(params) {
				this.$refs.uToast.show({
					...params
					// complete() {
					// 	params.url &&
					// 		uni.navigateTo({
					// 			url: params.url
					// 		});
					// }
				});
			},
			logout() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确认退出登录？',
					showCancel: true, // 是否显示取消按钮
					confirmText: '确定', // 确定按钮的文本
					success: (res) => {
						if (res.confirm) {
							uni.removeStorage({
								key: 'token',
								success: function(resp) {
									setTimeout(() => {
										uni.reLaunch({
											url: '/pages/login/login'
										})
									}, 1000);
								}
							});
						} else if (res.cancel) {
							console.log('用户点击了取消按钮');
						}
					},
					fail: (error) => {
						console.error('显示弹窗失败', error);
					}
				});

			},
			changImg() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
						uni.setStorageSync('url', res.tempFilePaths[0]);
						uni.reLaunch({
							url: '/pages/mine/mine'
						})
					}
				});
				this.onShow();
				uni.usei;
			},
			myCollect() {
				uni.navigateTo({
					url: '/pages/my_collect/my_collect'
				});
			},
			myThumb() {
				uni.navigateTo({
					url: '/pages/my_thumb/my_thumb'
				});
			}
		}
	};
</script>

<style lang="scss">
	.my_order_content1 {
		position: absolute;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;

		image {
			width: 80rpx;
			height: 50rpx;
		}
	}

	page {
		background-color: #eee;
	}

	.logout {
		position: absolute;
		margin-left: 600rpx;
		z-index: 99999;
	}

	.content_image {
		image {
			// 高斯模糊
			filter: blur(3rpx);
			width: 100%;
		}

		height: 300rpx;
		position: relative;
	}

	.content_botton {
		.noLogin {
			position: absolute;
			left: 45%;
			transform: translate(-50%);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			margin-top: 15%;
			margin-left: 5%;
			border-radius: 20rpx;
			width: 90%;
			height: 250rpx;
			background-color: #fff;
			justify-content: center;
			align-items: center;
			position: relative;

			image {
				width: 100rpx;
				height: 100rpx;
			}
		}

		.content_info {
			position: relative;
			z-index: 999;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			margin-top: 15%;
			margin-left: 5%;
			border-radius: 20rpx;
			width: 90%;
			height: 250rpx;
			background-color: #fff;

			image {
				margin-top: -40rpx;
				width: 130rpx;
				height: 130rpx;
				border-radius: 50%;
			}

			.username {}

			.select {
				display: flex;
				justify-content: space-between;

				view {
					padding: 0 40rpx;
				}
			}
		}

		.my_order {
			width: 90%;
			margin-top: 10rpx;
			margin-left: 5%;
			height: 280rpx;
			border-radius: 20rpx;
			background-color: #fff;

			.my_order_title {
				border-radius: 20rpx;
				padding-left: 20rpx;
				line-height: 80rpx;
				height: 80rpx;
			}

			.my_order_item {
				padding: 4.5%;
				float: left;

				.my_order_content {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;

					image {
						width: 80rpx;
						height: 50rpx;
					}
				}
			}
		}
	}

	.other {
		margin: 10rpx 40rpx;
		height: 690rpx;
		width: 90%;
		border-radius: 20rpx;
		background-color: #fff;

		.other_message {
			height: 60rpx;
			padding: 20rpx 20rpx;
			display: flex;
			justify-content: space-between;

			image {
				width: 50rpx;
			}
		}

		.other_addres {
			height: 60rpx;
			padding: 20rpx 20rpx;
			border-bottom: 1rpx dashed gainsboro;
			display: flex;
			justify-content: space-between;

			image {
				width: 50rpx;
			}
		}

		.other_our {
			height: 60rpx;
			padding: 20rpx 20rpx;
			display: flex;
			justify-content: space-between;

			image {
				width: 50rpx;
			}
		}
	}
</style>